<template>
<div id="container">
  <div id="visualization"></div>
</div>
</template>

<script>
export default {
  name: "foamtree",
  title: "泡沫树",
  data() {
    return {}
  },
  mounted() {
    // Initialize FoamTree
    var foamtree = new CarrotSearchFoamTree({
      id: "visualization",
      pixelRatio: window.devicePixelRatio || 1
    })

    // Initialized interaction hints and guide. The required
    // HTML will be automatically inserted into the visualization container.
    CarrotSearchFoamTree.hints(foamtree)

    // Resize FoamTree on orientation change
    window.addEventListener("orientationchange", foamtree.resize)

    // Resize on window size changes
    window.addEventListener("resize", (function() {
      var timeout
      return function() {
        window.clearTimeout(timeout)
        timeout = window.setTimeout(foamtree.resize, 300)
      }
    })())

    // Load some data set
    JSONP.load("assets/data/data-mining-100-topic-hierarchical.js", "modelDataAvailable", function(dataObject) {
      foamtree.set("dataObject", dataObject)
    })
  }
}
</script>

<style lang="less">
</style>
